<template>
  <div class="journalingContent">
    <!-- 审核进度区域 -->
    <div class="journalingHead" v-loading="loadingHead1">
      <div class="headNav">
        <div class="txt1">审核进度</div>
        <!-- <div
          class="btn default"
          :class="{
            stss1: findFinanceData.financeStatus == 1,
            stss2: findFinanceData.financeStatus == 2,
            stss3: findFinanceData.financeStatus == 3,
          }"
        >
          {{ findFinanceData.financeStatusStr }}
        </div> -->
        <div class="btn default sts1" v-if="findFinanceData.currentStatusStr == '已通过'">{{ findFinanceData.currentStatusStr }}</div>
        <div class="btn default sts2" v-if="findFinanceData.currentStatusStr == '审核中'">{{ findFinanceData.currentStatusStr }}</div>
        <div class="btn default sts3" v-if="findFinanceData.currentStatusStr == '已驳回'">{{ findFinanceData.currentStatusStr }}</div>
        <div class="btn default sts4" v-if="findFinanceData.currentStatusStr == '草稿'">{{ findFinanceData.currentStatusStr }}</div>

        <div class="point" v-if="findFinanceData.currentStatus == 2 || findFinanceData.currentStatus == 4">驳回原因：{{ findFinanceData.failMsg || '暂无' }}</div>
        <span class="czSpan" @click="journalingApproveShowFun"> 审核记录 </span>
      </div>
      <div class="tipText" v-if="axhFinance.fbStatus">二次修改审核</div>
      <div class="stepsNav">
        <!-- * 0 等待审核（蓝色）
        * 1 等待审核（灰色）
        * 2 已通过审核
        * 3 当前阶段已被驳回 -->
        <div class="stepItem" v-for="(item, index) in axhAuditFinanceLogVos" :key="index">
          <div class="stepNum">
            <div class="iconOrder state0" style="color: #2c83e4" v-if="item.wait == 0">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state1" style="color: #d8d8d8" v-if="item.wait == 1">
              {{ index + 1 }}
            </div>
            <div class="iconOrder state2" style="color: #2c83e4" v-if="item.wait == 2">
              {{ index + 1 }}
            </div>
            <img v-if="item.wait == 3" src="@/assets/image/close3.png" />
            <template v-if="!(index + 1 == axhAuditFinanceLogVos.length)">
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 0"></div>
              <div class="iconLine" v-if="axhAuditFinanceLogVos[index + 1].wait == 1"></div>
              <div class="iconLine state0" v-if="axhAuditFinanceLogVos[index + 1].wait == 2"></div>
              <div class="iconLine state3" v-if="axhAuditFinanceLogVos[index + 1].wait == 3"></div>
            </template>
          </div>
          <div class="stepCont">
            <div class="tit" :class="{ c00: item.wait == 0, c11: item.wait == 1, c00: item.wait == 2, c33: item.wait == 3 }">
              {{ item.title }}
            </div>
            <p :class="{ c00: item.wait == 0, c11: item.wait == 1, c00: item.wait == 2, c33: item.wait == 3 }">
              <!-- {{ item.wait == 2 && item.title == '提交报表' ? '已成功提交报表' : journTypeArr[item.wait] }} -->
              {{ item.waitStr }}
            </p>
            <p>{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作按钮区域 -->
    <div class="btnContent">
      <div class="leftCont">
        <template v-if="false">
          <div class="inpItem">
            <div class="label">标题</div>
            <div class="labCont">
              <el-input size="large" :readonly="!btnRole.isSave" v-model.trim="axhFinance.financeTitle" placeholder="请输入需要变更的标题" clearable />
            </div>
          </div>
          <div class="inpItem">
            <div class="label">月份</div>
            <div class="labCont">
              <el-date-picker
                size="large"
                @change="pickTimeChange"
                v-model="axhFinance.createTime"
                :readonly="!btnRole.isSave"
                value-format="YYYY-MM"
                :disabled-date="disabledDate"
                type="month"
                placeholder="选择月份"
              />
            </div>
          </div>
        </template>
        <div>
          <div class="titl" v-if="true">{{ findFinanceData.title }}</div>
          <span class="subheading">{{ findFinanceData.createTimeStr }}</span> <span class="subheading" style="margin-left: 10px">{{ findFinanceData.systemTypeName }}</span>
        </div>
      </div>
      <div class="rightCont">
        <!-- 当前报表的状态 - financeStatus
        1、已通过
        2、审核中
        3、驳回
        4、草稿 -->
        <!-- 跨级查看审批表时无法去进行操作 -->
        <!-- <div class="btn info">
          <img class="img" src="@/assets/image/jourBtn1.png" alt="" />
          凭证
        </div> -->
        <div class="btn info" v-if="findFinanceData.financeStatusStr == '草稿'" @click="submitAudit">
          <!-- <img class="img" src="@/assets/image/jourBtn1.png" alt="" /> -->
          提交
        </div>
        <div class="btn info" v-if="financeBtnVo && financeBtnVo.isAgreePublicBtn && findFinanceData.isPublic == 0" @click="publicReport(1)">
          <!-- <img class="img" src="@/assets/image/jourBtn3.png" alt="" /> -->
          公开
        </div>
        <div class="btn info" v-if="financeBtnVo && financeBtnVo.isAgreePublicBtn && findFinanceData.isPublic == 1" @click="publicReport(0)">
          <!-- <img class="img" src="@/assets/image/jourBtn3.png" alt="" /> -->
          取消公开
        </div>
        <div class="btn info" v-if="findFinanceData.financeStatusStr == '草稿'" @click="deleteReport">
          <!-- <img class="img" src="@/assets/image/jourBtn3.png" alt="" /> -->
          删除
        </div>

        <div class="btn success" v-if="financeBtnVo.isAgreeRefuseAuditBtn" @click="agreePassAudit(1)">通过</div>
        <div class="btn warning" v-if="financeBtnVo.isAgreeRefuseAuditBtn" @click="openRefuseAuditWin">驳回</div>
      </div>
    </div>
    <!-- <div class="reportBox" v-if="financeImgList && financeImgList.length > 0">
      <img class="reportBoxImg" :src="item" v-for="(item, index) in financeImgList" :key="index" />
    </div>
    <div class="noList" v-if="!(financeImgList && financeImgList.length > 0)">
      <img src="@/assets/image/noData1.png" />
      <div class="textTip">暂无数据</div>
    </div> -->

    <div class="reportBox" v-if="findFinanceData.content">
      <div v-html="findFinanceData.content"></div>
    </div>
    <div class="noList" v-if="!findFinanceData.content">
      <img src="@/assets/image/noData1.png" />
      <div class="textTip">暂无数据</div>
    </div>

    <!-- <div class="tipsAll" v-if="axhFinance.fbStatus">
      <i class="aaaaa el-icon el-alert__icon">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            fill="currentColor"
            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256zm0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z"
          ></path>
        </svg>
      </i>
      红色背景区域是被修改的数据行
    </div> -->

    <!-- 表格区域 -->
    <!-- <div class="loadingBox" v-loading="loadingHead2">
      <div class="tableList" v-if="axhFinance.areaType == 2">
        <div class="tableItem">
          <el-table
            :data="financeReports"
            :header-cell-style="{
              color: '#FF0010',
              backgroundColor: '#EEFBEE',
              padding: '8px 0',
            }"
            :cell-style="{ padding: '15px 0' }"
            :row-class-name="rowStyle"
            row-key="parentBase.id"
            border
            default-expand-all
          >
            <el-table-column label="科目编号" fixed="left" prop="parentBase.financeNumber" width="160px" />
            <el-table-column label="科目名称" prop="parentBase.lineName" min-width="200px">
              <template #default="scope">
                <span v-if="scope.row.parentBase.accessory" class="c00 ccSpan" @click="seeAccessoryPho(scope.row)">
                  {{ scope.row.parentBase.lineName }}
                  <pic class="picIcon" theme="filled" size="18" fill="#2C83E4" />
                </span>
                <span v-else>{{ scope.row.parentBase.lineName }}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="noHiddle" label="期初余额" align="right" width="220px">
              <template #default="scope">
                <div class="stastBalance">
                  <span class="stastBalanceOne">
                    {{ scope.row.parentBase.headMoneyType }}
                  </span>
                  <span class="stastBalanceTwo">
                    {{ scope.row.parentBase.headMoney }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="本期发生" align="right">
              <el-table-column label="借方" prop="parentBase.currentBorrow" align="right" width="200px"> </el-table-column>
              <el-table-column label="贷方" prop="parentBase.currentLoan" align="right" width="200px"> </el-table-column>
            </el-table-column>
            <el-table-column class-name="noHiddle" label="期末余额" align="right" width="220px">
              <template #default="scope">
                <div class="stastBalance">
                  <span class="stastBalanceOne">
                    {{ scope.row.parentBase.endMoneyType }}
                  </span>
                  <span class="stastBalanceTwo">
                    {{ scope.row.parentBase.endMoney }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="200" v-if="isYesRevise || ldYesRevise || findFinanceData.financeStatus == 4">
              <template #default="scope">
                <div class="villageTabBtn">
                  <span class="color1" @click="setVillageEdit(scope.row, 1)"> 编辑 </span>
                  <span class="color5" @click="setVillageEdit(scope.row, 2)" v-if="!(scope.row.parentBase.lineName == '合计')"> 添加 </span>
                  <span class="color3" @click="deleteTabRow(scope.row)" v-if="!(scope.row.parentBase.lineName == '合计')"> 删除 </span>
                  <span class="color4" @click="seeAccessoryPho(scope.row)" v-if="!(scope.row.parentBase.lineName == '合计')">凭证</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tableList" v-if="axhFinance.areaType == 1">
        <div class="tableItem">
          <el-table
            :data="financeReports"
            :header-cell-style="{
              color: '#F05E5E',
              backgroundColor: '#EEFBEE',
              padding: '22px 0',
            }"
            :row-class-name="rowStyle"
            :cell-style="{ padding: '15px 0' }"
            row-key="parentBase.id"
            border
            default-expand-all
          >
            <el-table-column label="资产" prop="parentBase.lineName">
              <template #default="scope">
                <span v-if="scope.row.parentBase.accessory" class="c00 ccSpan" @click="seeAccessoryPho(scope.row)">
                  {{ scope.row.parentBase.lineName }}
                  <pic class="picIcon" theme="filled" size="18" fill="#2C83E4" />
                </span>
                <span v-else>{{ scope.row.parentBase.lineName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="期末余额" prop="parentBase.endMoney" align="right" />
            <el-table-column label="年初余额" prop="parentBase.headMoney" align="right" />
            <el-table-column label="操作" fixed="right" align="center" width="70" v-if="isYesRevise || ldYesRevise || findFinanceData.financeStatus == 4">
              <template #default="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <div class="operations">操作</div>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <span class="color1" @click="editTabRow(scope.row, 1, 1)">编辑</span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '资产总计')">
                        <span class="color5" @click="editTabRow(scope.row, 1, 2)">添加</span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '资产总计')">
                        <span class="color3" @click="deleteTabRow(scope.row)"> 删除 </span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '资产总计')">
                        <span class="color4" @click="seeAccessoryPho(scope.row)">凭证</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tableItem">
          <el-table
            :data="financeReportsType2"
            :header-cell-style="{
              color: '#F05E5E',
              backgroundColor: '#EEFBEE',
              padding: '22px 0',
            }"
            :row-class-name="rowStyle"
            :cell-style="{ padding: '15px 0' }"
            row-key="parentBase.id"
            border
            default-expand-all
          >
            <el-table-column label="负债和净资产" prop="parentBase.lineName">
              <template #default="scope">
                <span v-if="scope.row.parentBase.accessory" class="c00 ccSpan" @click="seeAccessoryPho(scope.row)">
                  {{ scope.row.parentBase.lineName }}
                  <pic class="picIcon" theme="filled" size="18" fill="#2C83E4" />
                </span>
                <span v-else>{{ scope.row.parentBase.lineName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="期末余额" prop="parentBase.endMoney" align="right" />
            <el-table-column label="年初余额" prop="parentBase.headMoney" align="right" />
            <el-table-column label="操作" fixed="right" align="center" width="70" v-if="isYesRevise || ldYesRevise || findFinanceData.financeStatus == 4">
              <template #default="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <div class="operations">
                      操作
                    </div>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <span class="color1" @click="editTabRow(scope.row, 2, 1)">编辑</span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '负债和净资产总计')">
                        <span class="color5" @click="editTabRow(scope.row, 2, 2)">添加</span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '负债和净资产总计')">
                        <span class="color3" @click="deleteTabRow(scope.row)">删除</span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="!(scope.row.parentBase.lineName == '负债和净资产总计')">
                        <span class="color4" @click="seeAccessoryPho(scope.row)"> 凭证 </span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div> -->
    <!-- 审批操作日志窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="journalingApproveShow" width="520px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">审核记录</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <div class="approveWin">
          <div :key="index" v-for="(item, index) in findAuditLogRecordList" class="stepItem">
            <div class="stepNum">
              <div class="iconOrder">
                {{ findAuditLogRecordList.length - index }}
              </div>
              <template v-if="!(index + 1 == findAuditLogRecordList.length)">
                <div class="iconLine"></div>
              </template>
            </div>
            <div class="stepCont">
              <div class="tit">
                <span style="color: #35353f">{{ item.logContent }}</span>
                <el-popover v-if="item.isTurn === 1" placement="bottom" :width="200" trigger="hover" :content="item.remark">
                  <template #reference>
                    <img class="spanIcon" src="@/assets/image/jourTip2.png" alt="" />
                  </template>
                </el-popover>
              </div>
              <p>{{ item.createTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 社区编辑新增窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="journalingEditShow" width="520px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">
            {{ operationType == 1 ? '编辑' : '添加' }}
          </span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel" v-loading="dialogLoadingShow">
        <div class="labelItem">
          <div class="term">
            <div class="label">
              {{ lineType == 1 ? '资产' : '负债和净资产' }}
              <i v-if="editTabRowItem.lineNameCopy">原:{{ editTabRowItem.lineNameCopy }}</i>
            </div>
            <div>
              <el-input size="large" :disabled="isHeJi" v-model.trim="editTabRowItem.lineName" :placeholder="lineType == 1 ? '请输入资产名称' : '请输入负债和净资产名称'" clearable />
            </div>
          </div>
        </div>

        <div class="labelItem">
          <div class="term">
            <div class="label">
              期末余额
              <i v-if="editTabRowItem.endMoneyCopy">原:{{ priceFormat(editTabRowItem.endMoneyCopy) }}</i>
            </div>
            <div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.endMoney" placeholder="请输入期末余额" clearable />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">
              年初余额
              <i v-if="editTabRowItem.headMoneyCopy">原:{{ priceFormat(editTabRowItem.headMoneyCopy) }}</i>
            </div>
            <div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.headMoney" placeholder="请输入年初余额" clearable />
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="journalingEditShow = false">取消</div>
          <div class="btn info" @click="submitJournaling">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 村编辑窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="villageEditShow" width="620px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">
            {{ operationType == 1 ? '编辑' : '添加' }}
          </span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel" v-loading="dialogLoadingShow">
        <div class="labelItem">
          <div class="term" v-if="!isHeJi">
            <div class="label">
              科目编号
              <i v-if="editTabRowItem.financeNumberCopy">原:{{ editTabRowItem.financeNumberCopy }}</i>
            </div>
            <div>
              <el-input size="large" v-model.trim="editTabRowItem.financeNumber" placeholder="请输入科目编号" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">
              科目名称
              <i v-if="editTabRowItem.lineNameCopy">原:{{ editTabRowItem.lineNameCopy }}</i>
            </div>
            <div>
              <el-input size="large" :disabled="isHeJi" v-model.trim="editTabRowItem.lineName" placeholder="请输入科目名称" clearable />
            </div>
          </div>
        </div>

        <div class="labelItem">
          <div class="term">
            <div class="label">
              期初余额
              <i v-if="editTabRowItem.headMoneyCopy">原:{{ editTabRowItem.headMoneyTypeCopy }}-{{ editTabRowItem.headMoneyCopy }}</i>
            </div>
            <div class="flexCont">
              <div class="dropdown">
                <el-dropdown trigger="click">
                  <div class="dropdownText">
                    <span class="text">{{ editTabRowItem.headMoneyType }}</span>
                    <down class="icon" theme="outline" size="22" fill="#333" />
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('借', 1)">借</div>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('贷', 1)">贷</div>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('平', 1)">平</div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.headMoney" placeholder="请输入期初余额" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">
              期末余额
              <i v-if="editTabRowItem.endMoneyCopy">原:{{ editTabRowItem.endMoneyTypeCopy }}-{{ editTabRowItem.endMoneyCopy }}</i>
            </div>
            <div class="flexCont">
              <div class="dropdown">
                <el-dropdown>
                  <div class="dropdownText">
                    <span class="text">{{ editTabRowItem.endMoneyType }}</span>
                    <down class="icon" theme="outline" size="22" fill="#333" />
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('借', 2)">借</div>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('贷', 2)">贷</div>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <div class="itemSpan" @click="selectHeadMoneyType('平', 2)">平</div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.endMoney" placeholder="请输入期末余额" clearable />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">
              借 方<i v-if="editTabRowItem.currentBorrow">原:{{ priceFormat(editTabRowItem.currentBorrowCopy) }}</i>
            </div>
            <div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.currentBorrow" placeholder="请输入借方金额" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">
              贷 方<i v-if="editTabRowItem.currentLoan"> 原:{{ priceFormat(editTabRowItem.currentLoanCopy) }} </i>
            </div>
            <div>
              <el-input size="large" type="number" v-model.trim="editTabRowItem.currentLoan" placeholder="请输入贷方金额" clearable />
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="villageEditShow = false">取消</div>
          <div class="btn info" @click="submitVillageEdit">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 审批留言窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="approvalMsgShow" width="480px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">驳回原因</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel" style="padding: 0 10px">
        <div class="labelItem">
          <div class="term">
            <div class="label">提交描述：</div>
            <div>
              <el-input size="large" type="textarea" resize="none" :autosize="{ minRows: 8 }" v-model.trim="remarkInput" maxlength="100" show-word-limit placeholder="请输入审批内容" clearable />
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="approvalMsgShow = false">取消</div>
          <div class="btn info" @click="passFinanceTable(3)">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 拒绝理由弹出 -->
    <el-dialog :close-on-click-modal="false" v-model="refuseAuditVisible" title="拒绝理由" width="40%">
      <el-form label-width="100px">
        <el-form-item label="拒绝理由: ">
          <el-input type="textarea" :rows="5" show-word-limit maxlength="255" placeholder="请输入拒绝理由" style="width: 90%" v-model="refuseMsg"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="refuseAuditVisible = false">取消</el-button>
          <el-button type="primary" @click="agreePassAudit(2)"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看凭证 -->
    <pictureLibrary
      @close="closeVoucher"
      @addVoucherImage="addVoucherImage"
      @delectPicture="delectPicture"
      :pictureData="pictureData"
      :pictureDataName="pictureDataName"
      :layout="pictureLibrarylayout"
      :show="pictureLibraryShow"
    ></pictureLibrary>
  </div>
</template>

<script>
import PictureLibrary from '@/components/PictureLibrary.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: '',
  components: {
    PictureLibrary,
  },
  data() {
    return {
      journalingEditShow: false,
      journalingApproveShow: false,
      villageEditShow: false,
      approvalMsgShow: false,
      pictureLibraryShow: false,
      dialogLoadingShow: false,
      isYesRevise: false,
      ldYesRevise: false,
      pictureLibrarylayout: '',
      findAuditLogRecordList: [],
      journId: '',
      userInfo: {},
      currentTabIndex: '',
      loadingHead1: false,
      loadingHead2: false,
      editTabRowItem: {},
      lineType: '', // 1、资产2、负债和净资产
      pictureData: [],
      pictureDataName: '',
      parentBaseData: {},
      isHeJi: false,
      operationType: '', // 1 编辑  2 添加
      journTypeArr: ['等待审核', '等待审核', '已通过', '已拒绝'],
      findFinanceData: [],
      axhAuditFinanceLogVos: [],
      btnRole: {},
      axhFinance: {},
      financeTitleCopy: '',
      createTimeCopy: '',
      financeReports: [],
      journalingApproveShowLoading: false,
      financeReportsType2: [],
      remarkInput: '',
      disabledDate: (time) => {
        return time.getTime() > Date.now()
      },
      financeImgList: [],
      financeBtnVo: {},
      auditId: '',
      reportType: '',
      refuseAuditVisible: false,
      refuseMsg: '',
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('dtUsersVo'))
    this.journId = this.$route.query.id
    this.auditId = this.$route.query.auditId
    this.currentTabIndex = this.$route.query.currentTabIndex
    this.reportType = this.$route.query.reportType
    // this.getFindFinanceInformation()
    this.findFinanceById()
  },
  methods: {
    /**
     * 打开拒绝弹出
     */
    openRefuseAuditWin() {
      this.refuseMsg = ''
      this.refuseAuditVisible = true
    },
    /**
     * 同意拒绝报表审核
     * @param {*} type  1同意 2拒绝
     */
    agreePassAudit(type) {
      if (type == 1) {
        ElMessageBox.confirm('是否通过该文章的审核?', '警告', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.agreePassAuditApi(type)
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
          })
      } else {
        if (!this.refuseMsg) {
          ElMessage.error('请输入拒绝理由')
          return
        }
        this.agreePassAuditApi(type)
      }
    },
    /**
     * 掉接口
     */
    agreePassAuditApi(type) {
      let obj = { auditId: this.auditId, id: this.journId, reportType: this.reportType, failMsg: this.refuseMsg, type: type }
      this.$http.post('/axh/audit/news/agreePassNewsAudit', obj).then((data) => {
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        this.refuseAuditVisible = false
        this.findFinanceById()
      })
    },
    /**
     * 公开报表
     */
    publicReport(isPublic) {
      ElMessageBox.confirm('是否公开该文章吗?', '提示', {
        confirmButtonText: '公开',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post('/axh/articleManage/publicContent', { contentId: this.journId, type: this.findFinanceData.contentType }).then((data) => {
          ElMessage({
            type: 'success',
            message: '操作成功',
          })
          this.findFinanceById()
        })
      })
    },
    /**
     * 提交审核
     */
    submitAudit() {
      ElMessageBox.confirm('是否提交审核吗?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post('/axh/report/forms/initiateAudit', { id: this.journId }).then((data) => {
          ElMessage({
            type: 'success',
            message: '提交成功',
          })
          this.findFinanceById()
        })
      })
    },
    /**
     * 删除报表
     */
    deleteReport() {
      ElMessageBox.confirm('是否删除该报表?', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.post('/axh/report/forms/deleteReportForm', { id: this.journId }).then((data) => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          this.$router.go(-1)
        })
      })
    },
    /**
     * 通过报表id查询报表
     */
    findFinanceById() {
      this.$http.post('/axh/audit/news/findNewsVoById', { id: this.journId }).then((data) => {
        this.findFinanceData = data.result
        this.financeBtnVo = this.findFinanceData.financeBtnVo
        this.axhAuditFinanceLogVos = data.result.axhAuditFinanceLogVos

        if (this.findFinanceData.reportImages) {
          this.financeImgList = this.findFinanceData.reportImages.split(',')
        } else {
          this.financeImgList = []
        }
      })
    },

    pickTimeChange(e) {
      this.axhFinance.financeTitle = `${this.axhFinance.areaName}-${this.formatDate(e, 'yyyy年MM月')}${this.axhFinance.areaType == 1 ? '资产负债表' : '科目余额表'}`
    },
    rowStyle({ row, rowIndex }) {
      if (row.parentBase.fbFlag == 1) {
        return 'success_class'
      } else {
        return ''
      }
    },
    // 二次编辑 提交审核
    submitRevise() {
      ElMessageBox.confirm('是否保留二次修改数据，并提交审核？', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http.post(`/axh/submitFb?financeId=${this.journId}`).then((res) => {
          if (res && res.result) {
            // this.getFindFinanceInformation();
            this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
              this.$store.dispatch('delVisitedViews', this.$route)
              this.$router.go(-1)
            })
            ElMessage({
              type: 'success',
              message: '提交成功',
            })
          }
        })
      })
    },
    // 还原修改后的报表
    submitReduction() {
      ElMessageBox.confirm('当前修改的信息即将清空, 确定还要继续操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http.post(`/axh/clearFb?financeId=${this.journId}`).then((res) => {
          if (res && res.result) {
            ElMessage.success('操作成功！')
            this.getFindFinanceInformation()
          }
        })
      })
    },
    journalingApproveShowFun() {
      this.journalingApproveShow = true
      this.journalingApproveShowLoading = true
      this.$http
        .post('/axh/findAuditLogRecord', {
          financeId: this.journId,
          type: 2,
        })
        .then((res) => {
          if (res && res.result) {
            this.journalingApproveShowLoading = false
            this.findAuditLogRecordList = res.result
          }
        })
    },
    // 查询审核报表的详细信息
    getFindFinanceInformation() {
      this.$http
        .post('/axh/findFinanceInformation', {
          financeId: this.journId,
        })
        .then((res) => {
          if (res && res.result) {
            this.findFinanceData = res.result
            this.axhAuditFinanceLogVos = res.result.axhAuditFinanceLogVos
            this.btnRole = res.result.btn
            this.axhFinance = res.result.axhFinance
            this.financeTitleCopy = JSON.parse(JSON.stringify(res.result.axhFinance.financeTitle))
            this.createTimeCopy = JSON.parse(JSON.stringify(res.result.axhFinance.createTime))
            this.financeReports = res.result.financeReports
            this.financeReportsType2 = res.result.financeReportsType2
            this.loadingHead1 = false
            this.loadingHead2 = false
          }
        })
    },

    // 报表提交审核
    submitFinanceTable() {
      if (this.financeTitleCopy != this.axhFinance.financeTitle || this.createTimeCopy != this.axhFinance.createTime) {
        ElMessageBox.confirm('您对报表的"标题/月份"进行了修改，是否继续提交报表信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          draggable: true,
        }).then(() => {
          this.updateFinance(() => {
            return this.$http
              .post('/axh/submitFinance', {
                id: this.journId,
              })
              .then((res) => {
                if (res && res.result) {
                  this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
                    this.$store.dispatch('delVisitedViews', this.$route)
                    this.$router.go(-1)
                  })
                  ElMessage({
                    type: 'success',
                    message: '提交成功',
                  })
                }
              })
          })
        })
      } else {
        ElMessageBox.confirm('确定需要提交该财务报表审核吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          draggable: true,
        }).then(() => {
          this.$http
            .post('/axh/submitFinance', {
              id: this.journId,
            })
            .then((res) => {
              if (res && res.result) {
                // this.getFindFinanceInformation();
                this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
                  this.$store.dispatch('delVisitedViews', this.$route)
                  this.$router.go(-1)
                })
                ElMessage({
                  type: 'success',
                  message: '提交成功',
                })
              }
            })
        })
      }
    },
    // 更新报表基本信息
    updateFinance(cablack) {
      if (this.axhFinance.financeTitle == '' || this.axhFinance.financeTitle == null) {
        ElMessage({
          type: 'warning',
          message: '报表标题不能为空',
        })
        return
      }
      if (this.axhFinance.createTime == '' || this.axhFinance.createTime == null) {
        ElMessage({
          type: 'warning',
          message: '报表月份不能为空',
        })
        return
      }

      this.$http
        .post('/axh/updateFinance', {
          id: this.journId,
          month: this.formatDate(this.axhFinance.createTime, 'yyyy-MM'),
          financeTitle: this.axhFinance.financeTitle,
        })
        .then((res) => {
          if (res && res.result) {
            if (typeof cablack != 'undefined' && cablack instanceof Function) {
              cablack()
            } else {
              ElMessage({
                type: 'success',
                message: '保存成功',
              })
            }
          }
        })
    },
    // 删除报表信息
    delectFinanceTable() {
      ElMessageBox.confirm('删除后将不可恢复，确定需要删除该财务报表吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http
          .post('/axh/delOrRecoverReport', {
            id: this.journId,
            status: 0,
          })
          .then((res) => {
            if (res && res.result) {
              this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
                this.$store.dispatch('delVisitedViews', this.$route)
                this.$router.go(-1)
              })
              ElMessage({
                type: 'success',
                message: '删除成功',
              })
            }
          })
      })
    },
    // 报表转为草稿
    convertDraft() {
      ElMessageBox.confirm('确定需要将该报表报表转为草稿吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http
          .post('/axh/convertToDraft', {
            financeId: this.journId,
          })
          .then((res) => {
            if (res && res.result) {
              this.getFindFinanceInformation()
              ElMessage({
                type: 'success',
                message: '操作成功',
              })
            }
          })
      })
    },
    // 报表通过审核
    passFinanceTable(atype) {
      if (atype == 1) {
        // 通过按钮
        ElMessageBox.confirm('确认无误后点击确定将通过审核！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          draggable: true,
        }).then(() => {
          this.$http
            .post('/axh/auditFinance', {
              id: this.journId,
              remark: '同意',
              auditType: 1,
              fb: this.axhFinance.fbStatus ? 1 : '',
            })
            .then((res) => {
              // this.getFindFinanceInformation();
              if (res && res.result) {
                this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
                  this.$store.dispatch('delVisitedViews', this.$route)
                  this.$router.go(-1)
                })
                ElMessage({
                  type: 'success',
                  message: '操作成功',
                  auditType: '',
                })
              }
            })
        })
      } else {
        // 驳回按钮
        if (atype == 0) {
          this.remarkInput = ''
          this.approvalMsgShow = !this.approvalMsgShow
        }
        // 驳回原因窗口确认
        if (atype == 3) {
          ElMessageBox.confirm('确定需要驳回该报表信息吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
          }).then(() => {
            this.$http
              .post('/axh/auditFinance', {
                id: this.journId,
                remark: this.remarkInput,
                auditType: 0,
                fb: this.axhFinance.fbStatus ? 1 : '',
              })
              .then((res) => {
                if (res && res.result) {
                  // this.getFindFinanceInformation();
                  this.$store.dispatch('closeTags', { path: this.$route.path }).then(() => {
                    this.$store.dispatch('delVisitedViews', this.$route)
                    this.$router.go(-1)
                  })

                  // this.approvalMsgShow = !this.approvalMsgShow;
                  ElMessage({
                    type: 'success',
                    message: '操作成功',
                    auditType: '',
                  })
                }
              })
          })
        }
      }
    },
    // 编辑切换（借、贷、平）
    selectHeadMoneyType(data, type) {
      if (type == 1) {
        this.editTabRowItem.headMoneyType = data
      } else {
        this.editTabRowItem.endMoneyType = data
      }
    },
    // 编辑行（村）
    setVillageEdit(dat, opType) {
      this.operationType = opType
      this.isHeJi = dat.parentBase.lineName == '合计' ? true : false
      if (opType == 1) {
        this.editTabRowItem = JSON.parse(JSON.stringify(dat.parentBase))
        this.editTabRowItem.lineNameCopy = JSON.parse(JSON.stringify(dat.parentBase.lineName) || '')
        this.editTabRowItem.headMoneyCopy = JSON.parse(JSON.stringify(dat.parentBase.headMoney) || '')
        this.editTabRowItem.endMoneyCopy = JSON.parse(JSON.stringify(dat.parentBase.endMoney) || '')
        this.editTabRowItem.financeNumberCopy = JSON.parse(JSON.stringify(dat.parentBase.financeNumber) || '')
        this.editTabRowItem.currentBorrowCopy = JSON.parse(JSON.stringify(dat.parentBase.currentBorrow) || '')
        this.editTabRowItem.currentLoanCopy = JSON.parse(JSON.stringify(dat.parentBase.currentLoan) || '')
        this.editTabRowItem.headMoneyTypeCopy = JSON.parse(JSON.stringify(dat.parentBase.headMoneyType) || '')
        this.editTabRowItem.endMoneyTypeCopy = JSON.parse(JSON.stringify(dat.parentBase.endMoneyType) || '')
      } else {
        this.editTabRowItem = {
          financeId: this.journId,
          id: dat.parentBase.id,
          pid: dat.parentBase.pid,
          lineName: '',
          endMoney: '',
          headMoney: '',
          financeNumber: '',
          currentBorrow: '',
          currentLoan: '',
          headMoneyType: '平',
          endMoneyType: '平',
        }
      }
      this.villageEditShow = !this.villageEditShow
    },
    // 确认修改新增行信息（村）
    submitVillageEdit() {
      if (!this.isHeJi && this.editTabRowItem.lineName == '合计') {
        ElMessage({
          type: 'warning',
          message: '项目名称不能为“合计”',
        })
        return
      }
      this.dialogLoadingShow = true
      let params = {
        financeId: this.editTabRowItem.financeId,
        id: this.operationType == 1 ? this.editTabRowItem.id : '',
        pid: this.operationType == 1 ? this.editTabRowItem.pid : this.editTabRowItem.id,
        lineName: this.editTabRowItem.lineName,
        endMoney: this.editTabRowItem.endMoney,
        headMoney: this.editTabRowItem.headMoney,
        financeNumber: this.editTabRowItem.financeNumber,
        currentBorrow: this.editTabRowItem.currentBorrow,
        currentLoan: this.editTabRowItem.currentLoan,
        headMoneyType: this.editTabRowItem.headMoneyType,
        endMoneyType: this.editTabRowItem.endMoneyType,
        fb: this.isYesRevise ? 1 : '',
      }
      this.$http.post('/axh/updateOrSaveFinanceLineVillage', params).then((res) => {
        if (res && res.result) {
          this.getFindFinanceInformation()
          this.villageEditShow = false
          this.dialogLoadingShow = false
          ElMessage({
            type: 'success',
            message: '操作成功',
          })
        }
      })
    },
    // 编辑行（社区）
    editTabRow(dat, flay, opType) {
      this.lineType = flay
      this.isHeJi = dat.parentBase.lineName == '负债和净资产总计' || dat.parentBase.lineName == '资产总计' ? true : false
      this.operationType = opType
      if (opType == 1) {
        this.editTabRowItem = JSON.parse(JSON.stringify(dat.parentBase) || '{}')
        this.editTabRowItem.lineName = this.editTabRowItem.lineName.trim() || ''
        this.editTabRowItem.lineNameCopy = JSON.parse(JSON.stringify(dat.parentBase.lineName) || '')
        this.editTabRowItem.headMoneyCopy = JSON.parse(JSON.stringify(dat.parentBase.headMoney) || '')
        this.editTabRowItem.endMoneyCopy = JSON.parse(JSON.stringify(dat.parentBase.endMoney) || '')
      } else {
        this.editTabRowItem = {
          id: dat.parentBase.id,
          pid: this.editTabRowItem.pid,
          lineName: '',
          endMoney: '',
          headMoney: '',
        }
      }
      this.journalingEditShow = !this.journalingEditShow
    },
    // 确认修改/新增行信息（社区）
    submitJournaling() {
      if (!this.isHeJi && (this.editTabRowItem.lineName == '资产总计' || this.editTabRowItem.lineName == '负债和净资产总计')) {
        ElMessage({
          type: 'warning',
          message: '不可命名为“资产总计”或“负债和净资产总计”',
        })
        return
      }
      if (this.editTabRowItem.lineName.trim() == '') {
        ElMessage({
          type: 'warning',
          message: '资产/负债和净资产不可为空',
        })
        return
      }
      this.dialogLoadingShow = true
      let params = {
        financeId: this.journId,
        lineType: this.lineType,
        id: this.operationType == 1 ? this.editTabRowItem.id : '',
        pid: this.operationType == 1 ? this.editTabRowItem.pid : this.editTabRowItem.id,
        lineName: this.editTabRowItem.lineName,
        endMoney: this.editTabRowItem.endMoney,
        headMoney: this.editTabRowItem.headMoney,
        fb: this.isYesRevise ? 1 : '',
      }

      this.$http.post('/axh/updateOrSaveFinanceLineCommunity', params).then((res) => {
        if (res && res.result) {
          this.getFindFinanceInformation()
          this.journalingEditShow = false
          this.dialogLoadingShow = false
          ElMessage({
            type: 'success',
            message: '操作成功',
          })
        }
      })
    },
    // 删除行（社区、村）
    deleteTabRow(dat) {
      ElMessageBox.confirm('确定需要删除该条财务报表数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        this.$http
          .post('/axh/deleteFinanceLine', {
            financeId: this.journId,
            lineId: dat.parentBase.id,
            fb: this.isYesRevise ? 1 : '',
          })
          .then((res) => {
            if (res && res.result) {
              this.getFindFinanceInformation()
              ElMessage({
                type: 'success',
                message: '操作成功',
              })
            }
          })
      })
    },

    // 打开凭证
    seeAccessoryPho(dat) {
      if (this.findFinanceData.financeStatus == 4 || this.isYesRevise) {
        this.pictureLibrarylayout = 'delect, upload'
      }

      this.parentBaseData = dat
      this.pictureData = dat.parentBase?.accessory == '' || dat.parentBase?.accessory == null ? [] : dat.parentBase?.accessory?.split(',')
      this.pictureDataName = dat.parentBase.lineName || ''
      this.pictureLibraryShow = !this.pictureLibraryShow
    },
    // 打开凭证
    // openVoucher(dat) {
    //   this.parentBaseData = dat;
    //   this.$http
    //     .post("/axh/findFinanceAccessory", {
    //       financeId: this.journId,
    //       lineId: dat.parentBase.id,
    //     })
    //     .then((res) => {
    //       this.pictureData = res.result || [];
    //       this.pictureDataName = dat.parentBase.lineName;
    //       this.pictureLibraryShow = !this.pictureLibraryShow;
    //     });
    // },
    // 上传凭证
    addVoucherImage(data) {
      let pictureData = JSON.parse(JSON.stringify(this.pictureData))
      pictureData = [...pictureData, ...data]
      this.$http
        .post('/axh/uploadFinanceAccessory', {
          financeId: this.journId,
          accessory: pictureData.join(','),
          lineId: this.parentBaseData.parentBase.id,
          fb: this.isYesRevise ? 1 : '',
        })
        .then((res) => {
          if (res && res.result) {
            // 判断打开凭证的过程中是否有成功上传过凭证，有的话关闭时刷新页面，没有不做任何操作
            this.pictureData = [...this.pictureData, ...data]
          }
        })
    },
    // 删除凭证
    delectPicture(data) {
      let pictureData = JSON.parse(JSON.stringify(this.pictureData))
      pictureData.splice(data, 1)
      this.$http
        .post('/axh/uploadFinanceAccessory', {
          financeId: this.journId,
          accessory: pictureData.join(','),
          lineId: this.parentBaseData.parentBase.id,
          fb: this.isYesRevise ? 1 : '',
        })
        .then((res) => {
          if (res && res.result) {
            this.pictureData.splice(data, 1)
            ElMessage.success('删除成功')
          }
        })
    },
    // 关闭凭证
    closeVoucher(data) {
      if (data.isEditImage) {
        this.loadingHead2 = true
        this.getFindFinanceInformation()
      }
      this.pictureLibraryShow = data.isShow
    },
  },
}
</script>
<style lang="scss">
.journalingContent {
  padding: 20px;
  .journalingHead {
    background-color: $bgColorFFFFFF;
    margin-bottom: 20px;
    .headNav {
      position: relative;
      display: flex;
      padding: 16px;
      border-bottom: 1px solid #d8d8d8;
      // align-items: center;
      .txt1 {
        font-weight: 600;
        font-size: 18px;
        margin-right: 16px;
        line-height: 30px;
      }
      .btn {
        width: 52px;
        min-width: 52px;
        background: $bgColorEDEDED;
        color: $color999999;
        border: none;
        height: 30px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 16px;
      }
      .stss1 {
        width: auto;
        color: #3abf70;
        background: #d9f7e5;
      }
      .stss2 {
        width: auto;
        color: #ed7b07;
        background: #fff2e5;
      }
      .stss3 {
        color: #f05e5e;
        background: #ffecec;
        width: auto;
      }
      .point {
        color: $colorF05E5E;
        font-size: 16px;
        padding-top: 3px;
        max-width: 620px;
      }
      .czSpan {
        position: absolute;
        cursor: pointer;
        font-size: 16px;
        top: 25px;
        right: 16px;
        line-height: 18px;
        color: $color2C83E4;
        border-bottom: 1px solid $color2C83E4;
      }
    }
    .tipText {
      font-weight: 600;
      font-size: 16px;
      margin-left: 16px;
      margin-top: 10px;
      line-height: 30px;
      color: rgb(212, 91, 4);
    }
    .stepsNav {
      display: flex;
      padding: 20px 0 30px 0;
      min-height: 152px;
      justify-content: center;
      .stepItem {
        .stepNum {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          img {
            width: 40px;
            height: 40px;
          }
          .iconLine {
            width: 150px;
            height: 0px;
            border-bottom: 2px solid #d8d8d8;
          }
          .iconOrder {
            width: 40px;
            height: 40px;
            font-size: 18px;
            display: flex;
            color: $color2C83E4;
            align-items: center;
            justify-content: center;
            background: #e6f0fc;
            border-radius: 50%;
            border: 2px solid #2c83e4;
          }
        }
        .stepCont {
          .tit {
            font-size: 16px;
            color: #2c83e4;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            color: #a8a8a8;
          }
        }
      }
    }
  }
  .loadingBox {
    width: 100%;
    min-height: 380px;
  }
  .tipsAll {
    color: #f73131;
    padding-bottom: 5px;
    .aaaaa {
      font-size: 15px;
      transform: translateY(3px);
    }
  }
  .btnContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .leftCont {
      display: flex;
      .titl {
        font-weight: bold;
        font-size: 20px;
      }
      .inpItem {
        display: flex;
        align-items: center;
        margin-right: 24px;
        .label {
          margin-right: 12px;
        }
        .labCont {
          flex: 1;
          width: 0;
        }
        &:nth-child(1) {
          min-width: 265px;
        }
        &:nth-child(2) {
          min-width: 225px;
        }
      }
    }
    .rightCont {
      display: flex;
      .btn {
        width: 100px;
        margin-left: 18px;
        .img {
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
      }
    }
  }
  .tableList {
    display: flex;
    .tableItem {
      flex: 1;
      width: 0;
      .operations {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2c83e4;
        font-size: 14px;
      }
      .stastBalance {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        .stastBalanceOne {
          padding-right: 12px;
          &::after {
            content: '';
            position: absolute;
            left: 30px;
            top: -15px;
            height: calc(100% + 30px);
            width: 1px;
            background-color: #ebeef5;
          }
        }
        .stastBalanceTwo {
          flex: 1;
          width: 0;
          padding-left: 12px;
        }
      }
      &:nth-last-child(1) {
        transform: translate(-1px);
      }
    }
  }
  .villageTabBtn {
    span {
      cursor: pointer;
      padding: 0 6px;
    }
  }
  .approveWin {
    padding: 20px 30px;
    .stepItem {
      display: flex;
      .stepNum {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 16px;
        .iconOrder {
          width: 40px;
          height: 40px;
          font-size: 18px;
          display: flex;
          background: #f3f3f3;
          color: #35353f;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          line-height: 1;
          border: 2px solid rgb(209, 207, 207);
        }
        .iconLine {
          flex: 1;
          min-height: 46px;
          border-right: 2px solid rgb(209, 207, 207);
        }
      }
      .stepCont {
        padding-bottom: 16px;
        .tit {
          display: flex;
          align-items: center;
          font-size: 16px;
          // color: #2c83e4;
          margin-bottom: 1px;
          .spanIcon {
            margin-left: 4px;
            cursor: pointer;
            width: 16px;
            height: 16px;
          }
        }
        p {
          font-size: 14px;
          color: #9e9e9e;
        }
      }
    }
  }
  // .state1 {
  //   color: $colorF05E5E !important;
  //   border-color: $colorF05E5E !important;
  // }

  .state1 {
    color: #a8a8a8 !important;
    border-color: #a8a8a8 !important;
  }

  .state3 {
    color: #f05e5e !important;
    border-color: #f05e5e !important;
  }

  .state0 {
    color: #2c83e4 !important;
    border-color: #2c83e4 !important;
  }
  .labelBtn {
    padding-top: 0;
  }

  .c00 {
    color: #2c83e4 !important;
  }
  .c11 {
    color: #a8a8a8 !important;
  }
  .c22 {
    color: #35353f !important;
  }
  .c33 {
    color: #f05e5e !important;
  }

  .picIcon {
    transform: translateY(2px);
  }
  .ccSpan {
    cursor: pointer;
  }

  .el-table__row {
    .cell {
      min-height: 23px;
    }
  }
}

.movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

.movable-area {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}

.el-table .success_class {
  background-color: #fde1e3;
}

.reportBox {
  width: 100%;
  margin: 10px auto;
  // border: 1px solid red;
  background-color: #fff;
  min-height: 50vh;
  overflow-y: auto;
  padding: 20px;
  .reportBoxImg {
    width: 100%;
  }
}
.subheading {
  color: #999999;
  font-size: 12px;
}
</style>
